# Interpolation

<EpicVideo url="https://www.epicreact.dev/workshops/react-fundamentals/interpolation" />

🦉 "Interpolation" is defined as "the insertion of something of a different
nature into something else."

Let's take template literals for example:

```typescript
const greeting = 'Sup'
const subject = 'World'
const message = `${greeting} ${subject}`
```

👨‍💼 See if you can figure out how to extract the `className` (`"container"`) and
`children` (`"Hello World"`) to variables and interpolate them in the JSX.

```tsx
const className = 'container'
const children = 'Hello World'
const element = <div className="hmmm">how do I make this work?</div>
```

📜 The React docs for JSX are pretty good:
[Writing Markup with JSX](https://react.dev/learn/writing-markup-with-jsx)

Here are a few sections of particular interest for this step:

- [JavaScript in JSX with Curly Braces](https://react.dev/learn/javascript-in-jsx-with-curly-braces)
- [Passing strings with quotes](https://react.dev/learn/javascript-in-jsx-with-curly-braces#passing-strings-with-quotes)
